<script setup lang="ts">
  import IconArrow from '/@/assets/home/arrow.svg';
  import { Scrollbar } from '@arco-design/web-vue';
  import { ref } from 'vue';
  import { smoothScroll } from '/@/utils/scroll';

  interface HomeSwiperProps {
    scrollbarClass?: string | Recordable<string>;
    scrollbarOuterClass?: string | Recordable<string>;
  }
  const props = defineProps<HomeSwiperProps>();

  const scrollbarRef = ref();

  function scrollTo(dir: number) {
    if (scrollbarRef.value) {
      const containerRef: HTMLElement = scrollbarRef.value.containerRef;
      smoothScroll(containerRef, containerRef.scrollLeft + dir * containerRef.offsetWidth, 0);
      // scrollbarRef.value.scrollLeft(containerRef.scrollLeft + dir * containerRef.offsetWidth);
    }
  }
</script>

<template>
  <div class="">
    <div
      @click="scrollTo(-1)"
      class="absolute left-0 top-1/2 w-[80px] h-[160px] -mt-[80px] bg-white/[0.3] rounded-r-[60px] flex items-center justify-center cursor-pointer z-10"
    >
      <img :src="IconArrow" class="w-[50px] h-[70px]" />
    </div>
    <Scrollbar
      :outer-class="props.scrollbarOuterClass"
      :class="props.scrollbarClass"
      ref="scrollbarRef"
      class="overflow-auto"
    >
      <slot></slot>
    </Scrollbar>
    <div
      @click="scrollTo(1)"
      class="absolute right-0 top-1/2 w-[80px] h-[160px] -mt-[80px] bg-white/[0.3] rounded-l-[60px] flex items-center justify-center cursor-pointer z-10"
    >
      <img :src="IconArrow" class="w-[50px] h-[70px] rotate-180" />
    </div>
  </div>
</template>
